/* 广告区 */
#advertisement {
    margin-top: 10px;

    .advertisement_box {
        border-radius: 5px;
        background: #fff;
        padding: 6px;

        .advertisement_list {
            display: flex;
            flex-wrap: wrap;
            /* 允许换行 */

        }

        a {
            color: #f0f0f0;
        }
    }

    .advertisement_item {
        display: flex;
        flex-wrap: wrap;
        /* 允许换行 */
        background: #fff;
        margin-top: 10px;
        border-radius: 5px;
    }

    li {
        width: 239px;
        height: 40px;
        text-align: center;
        line-height: 41px;
        margin-top: 1px;
        margin-left: 1px;
    }
}

/* 文章区 */
#article {
    margin-top: 10px;
    height: 950px;

    .article {
        display: flex;

        .article-left {
            width: 400px;
            height: 950px;
            margin-right: 12px;

            .article-image {
                height: 300px;
                background: #fff;
                padding: 5px;
                border-radius: 5px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .rjtj {
                margin-top: 5px;
                width: 400px;
                height: 635px;
                background: #fff;

                .rjtj-header {
                    width: 400px;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 20px;
                    border-bottom: 1px solid #f0f0f0;

                    span {
                        margin-left: 10px;

                        .icon {
                            margin-right: 10px;
                            color: #ffa400;
                        }
                    }

                    a {
                        margin-right: 20px;
                        font-size: 16px;
                        cursor: pointer;
                        color: #666;
                    }
                }

                .rjtj-lists {
                    display: flex;
                    flex-direction: column;
                    gap: 15px; /* 项目间距 */
                }

                .list-item {
                    display: flex;
                    align-items: center; /* 垂直居中对齐 */
                    justify-content: space-between; /* 左右分布 */
                    border-bottom: 1px solid #f6f6f6;
                    padding: 5px;
                }

                .item-image {
                    width: 60px; /* 设置图片宽度 */
                    height: auto; /* 自动高度 */
                    margin-right: 15px; /* 图片与内容间距 */
                }

                .item-content {
                    flex: 1; /* 使内容区域占满剩余空间 */
                    display: flex;
                    flex-direction: column; /* 垂直布局 */
                }

                .item-header {
                    display: flex;
                    justify-content: space-between; /* 标题和时间分布 */
                    align-items: center; /* 垂直居中对齐 */
                }

                .item-name {
                    margin: 0; /* 去掉默认的外边距 */
                    max-width: 235px; /* 限制名称最大宽度 */
                    max-height: 3.6em; /* 设置最大高度以控制行数，约 2 行 */
                    overflow: hidden; /* 隐藏超出部分 */
                    display: -webkit-box; /* 创建弹性盒子模型 */
                    -webkit-box-orient: vertical; /* 垂直排列 */
                    -webkit-line-clamp: 2; /* 限制为 2 行 */
                    text-overflow: ellipsis; /* 超出部分用省略号显示 */
                }

                .item-time {
                    color: gray; /* 设置时间颜色 */
                    margin: 0; /* 去掉默认的外边距 */
                }

                .item-footer {
                    display: flex;
                    justify-content: space-between; /* 分类和下载按钮分布 */
                    align-items: center; /* 垂直居中对齐 */
                }

                .item-type {
                    color: gray; /* 设置分类颜色 */
                    margin: 0; /* 去掉默认的外边距 */
                }


            }

        }

        .article-right {
            width: 788px;
            height: 940px;
            background: #fff;
            padding: 5px;
            border-radius: 5px;

            .article-header {
                display: flex;
                /* 两端对齐并且有间距 */
                justify-content: space-between;
                height: 50px;
                line-height: 50px;

                .article-header-left {
                    padding-left: 10px;
                    font-size: 20px;
                }

                .article-header-right {
                    color: #bcbcbc;
                }
            }

            .nav-child {
                width: 788px;
                height: 50px;
                background: #f9f9f9;
                line-height: 40px;
                display: flex;

                a {
                    width: 80px;
                    height: 30px;
                    margin: 10px auto;
                    display: inline-block;
                    text-align: center;
                    background: #fff;
                    line-height: 30px;
                    border-radius: 5px;
                }

                .action {
                    background: #5298ff;
                    color: #fff;
                    font-weight: 550;
                    /* 背景#4387fd 颜色透明 */
                    background: linear-gradient(to right, #5298ff, #4387fd);

                }
            }

            .article-lists {
                margin-top: 20px;

                ul {
                    width: 788px;
                    display: flex;
                    /* 自动换行 */
                    flex-wrap: wrap;
                    font-size: 17px;
                    list-style: disc;

                    li {
                        margin-left: 10px;
                        width: 384px;
                        height: 25px;
                        margin-bottom: 12px;
                        display: flex;
                        justify-content: space-between;

                        a:hover {
                            color: #166df1;
                        }

                        span {
                            padding-right: 10px;
                            color: #fd2b2b;
                        }

                        .tit {
                            position: relative;
                            overflow: hidden;
                            width: auto;
                            max-width: calc(100% - 50px);
                            text-indent: 15px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .tit::before {
                            position: absolute;
                            top: 10.5px;
                            left: 0;
                            width: 4px;
                            height: 4px;
                            border-radius: 50%;
                            background: #ffa400;
                            content: " ";
                        }

                        .ad {
                            color: #00aeef;
                            font-weight: 550;
                        }

                        .ad::before {
                            background: #c2c2c2;
                        }
                    }

                }

            }
        }


    }
}

/*资源下载区*/

#app {
    margin-top: 20px;

    .app-lists {

        .download-list {
            background: #fff;
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto;
        }

        .download-item {
            width: 380px;
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 10px;
        }

        .item-image {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .item-info {
            flex-grow: 1;
        }

        .item-title {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .item-meta {
            font-size: 12px;
            color: #999;
            display: flex;
            align-items: center;
        }

        .separator {
            margin: 0 5px;
        }

        .rating {
            color: #f39c12; /* 星级颜色 */
        }

        .download-btn {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
        }

        .download-btn:hover {
            background-color: #0056b3;
        }

    }

}

/*文章专区*/
#article_02 {

    .article_02{background: #fff;}
    .article-list {

        display: flex;
        flex-wrap: wrap; /* 自动换行 */
        width: 100%;
        max-width: 1150px;
        margin: 0 auto;
        padding: 20px 0;
    }

    .article-item {
        width: calc(33.33% - 20px); /* 每个项宽度为容器的三分之一减去间距 */
        margin: 10px; /* 每个项的间距 */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .article-title {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333;
    }

    .article-title .dot {
        width: 6px;
        height: 6px;
        background-color: #f39c12;
        border-radius: 50%;
        margin-right: 8px;
    }

    .article-date {
        font-size: 12px;
        color: #999;
    }
}

/*友情链接专区*/
#link {
    .link{
        background: #fff;
    }
    .friend-links {
        display: flex;
        flex-wrap: nowrap; /* 不换行，横向排列 */
        justify-content: flex-start; /* 左对齐 */
        gap: 20px; /* 链接之间的间距 */
        padding: 20px;
        border-radius: 5px;
        overflow-x: auto; /* 当超出容器宽度时可以横向滚动 */
    }

    .link-item {
        white-space: nowrap; /* 防止内容换行 */
        font-size: 14px;
    }

    .link-item a {
        text-decoration: none;
        transition: color 0.3s;
    }

    .link-item a:hover {
        color: #f39c12;
    }

}

/*资源下载 和 文章专区 共有*/
.app-header {
    height: 50px;
    display: flex;
    /*    两端对齐*/
    justify-content: space-between;
    align-items: center;

    span {
        margin-left: 10px;
        font-size: 20px;

        .icon {
            margin-right: 10px;
            color: #ffa400;
        }
    }

    a {
        margin-right: 20px;
        font-size: 16px;
        cursor: pointer;
        color: #666;
    }

}

.app-nav {
    width: 1120px;
    /*元素居中*/
    margin: 10px auto 10px;
    display: flex;
    font-size: 15px;
    justify-content: space-between;

    a {
        display: inline-block;
    }

    a:hover {
        color: #ffa400;
        border-bottom: 4px solid #ffa400;
        /*    下划线往后点*/
        padding-bottom: 8px;
    }

    .action {
        color: #ffa400;
        border-bottom: 4px solid #ffa400;
        padding-bottom: 8px;
    }
}